<template>
  <!-- 准备根标签-->
  <div>

      <!-- 1.编辑面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/userOne' }">用户信息</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 2.定义卡片标签 -->
      <el-card class="box-card">
        <div style="margin: 20px;"></div>
        <el-form label-width="80px" :model="user" :rules="rules" ref='userRefForm'>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名" prop="realname">
            <el-input v-model="user.realname"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-input v-model="user.gender"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model.number="user.age"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model="user.phone"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="idNum">
            <el-input v-model="user.idNum"></el-input>
          </el-form-item>
        </el-form>
        <div class="as">
          <el-button @click="addUserDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateUser">确 定</el-button>
        </div>


      </el-card>



  </div>
</template>

<script>
  export default {
    data(){

      const checkAge = (rule, value, callback) => {
              if (!value) {
                return callback(new Error('年龄不能为空'));
              }
              setTimeout(() => {
                if (!Number.isInteger(value)) {
                  callback(new Error('请输入数字值'));
                } else {
                  if (value < 18) {
                    callback(new Error('必须年满18岁'));
                  } else {
                    callback();
                  }
                }
              }, 1000);
            };

      //校验手机号规则
      const checkPhone = (rule, value, callback) => {

        //定义校验手机号的正则语法
        const phoneRege = /^1[3456789][0-9]{9}$/
        if (phoneRege.test(value)) {

          return callback()
        }
        callback(new Error('请填写正确的手机号'))

      }

      //密码确认  判断与password是否相同
      const checkPassword = (rule, value, callback) => {

        if(value !== this.addUserForm.password){
           return callback(new Error('2次密码填写不一致'))
        }
        //如果相同,则调用回调函数
        callback()
      }

      return {
                user: {
                  id:'',
                  username: '',
                  phone: '',
                  realname: '',
                  gender:'',
                  idNum:'',
                  password: '',
                  age: ''
                },

        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
          ],
          password2: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' },
            { validator: checkPassword, trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入电话', trigger: 'blur' },
            { min: 11, max: 11, message: '长度必须11个字符', trigger: 'blur' },
            { validator: checkPhone, trigger: 'blur' }
                    ],
          realname: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
          ],
          age: [
            { required: true, message: '请输入年龄', trigger: 'blur' },
           { validator: checkAge, trigger: 'blur' }
          ],
          gender: [
            { required: true, message: '请输入姓别', trigger: 'blur' },
            { min: 1, max: 1, message: '只能输入男或女', trigger: 'blur' }
          ],
          idNum: [
            { required: true, message: '请输入身份证号', trigger: 'blur' },
            { min: 18, max: 18, message: '输入正确的身份证号', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      //1.动态获取userList数据
      async getUser(){
       const {data: result} = await this.$http.get("/user/one/"+this.user.id)
       if(result.status !== 200) return this.$message.error("获取列表失败")
       //为total属性赋值
       this.user = result.data
      },
      updateUser(){
        //对整个表单重新进行校验  1.获取表单的对象  2.进行数据校验
        this.$refs.userRefForm.validate(async valid => {
          if(!valid) return this.$message.error("请正确填写数据")
          //之后发起ajax请求实现用户新增
         const {data: result} = await this.$http.put("/user/updateUser",this.user)
         if(result.status !== 200) return this.$message.error("修改操作失败!")
         this.$message.success("修改操作成功!")
         this.updateUserdialogVisible = false
         this.getUser()
        })
        }
},
    //当页面加载完成之后 调用该函数
    mounted(){
      //获取userList列表数据
      this.user.id = window.sessionStorage.getItem('id');
      this.getUser()
    }
}
</script>

  <!-- 当前样式是否支持less语法 样式的一种语言
  scoped 让样式只对当前组件有效 防止样式击穿 -->

<style lang="less" scoped>
.as{
  float:right;
  }
</style>
